<template>
	<view>
		<view class="logo">
			<img class="logo-img" :src="csdn.icon" alt="">
			<view class="logo-text">
				{{csdn.title}}
			</view>
		</view>
		<view v-for="(item,index) in csdn.hot" :key="index">
			<a :href="item.url" class="a">
				<view class="text">
					<view style="font-weight: 700;">{{item.title}}</view>
					<view style="color: orange;">{{item.heat}}</view>
				</view>
				<view><img mode="aspectFill" :src="item.cover" class="text-img" alt=""></view>
			</a>
		</view>
	</view>
</template>

<script>
	export default {
		name:"csdn",
		data() {
			return {
				csdn: ""
			};
		},
		mounted() {
			// this.current = localStorage.getItem("current")
			// 页面出现首次加载知乎
			uni.request({
				url: 'https://api.a20safe.com/api.php?api=29&key=e5f907b4ba1f08c8503433a5da97f0c9&web=csdn',
				success: (res) => {
					// console.log(res);
					// console.log(res.data.data[0]);
					this.csdn = res.data.data[0]
				}
			})
		}
	}
</script>

<style>
body {
		background-color: #ddd;
	}

	a {
		text-decoration: none;
		color: #000;
	}
	.logo {
		display: flex;
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
	}

	.logo-img {
		width: 50px;
		height: 50px;
	}

	.logo-text {
		line-height: 50px;
		color: #000;
		font-weight: 700;
		margin-left: 18px;
		font-size: 20px;
	}

	.a {
		display: flex;
		justify-content: space-between;
		padding: 5px 0;
		border-bottom: 1px solid #ccc;
	}

	.text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text-img {
		width: 100px;
		height: 100px;
		margin-left: 5px;
	}
</style>